<template>
  <div class="form-container">
    <h2>患者信息填写</h2>

    <form @submit.prevent="handleSubmit">
      <div class="form-item">
        <label for="patientName">患者姓名</label>
        <input id="patientName" v-model="formData.patientName" placeholder="请填写真实姓名"/>
      </div>

      <div class="form-item">
        <label for="gender">性别</label>
        <select id="gender" v-model="formData.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>

      <div class="form-item">
        <label for="birthDate">出生日期</label>
        <input id="birthDate" v-model="formData.birthDate" type="date" placeholder="请选择出生日期"/>
      </div>

      <div class="form-item">
        <label for="weight">体重 (kg)</label>
        <input id="weight" v-model="formData.weight" placeholder="请输入体重"/>
      </div>

      <div class="form-item">
        <label for="allergyHistory">过敏史</label>
        <select id="allergyHistory" v-model="formData.allergyHistory">
          <option value="无">无</option>
          <option value="有">有</option>
        </select>
      </div>

      <div class="form-item">
        <label for="pastMedicalHistory">过往病史</label>
        <select id="pastMedicalHistory" v-model="formData.pastMedicalHistory">
          <option value="无">无</option>
          <option value="有">有</option>
        </select>
      </div>

      <div class="form-item">
        <label for="liverFunction">肝功能</label>
        <select id="liverFunction" v-model="formData.liverFunction">
          <option value="正常">正常</option>
          <option value="异常">异常</option>
        </select>
      </div>

      <div class="form-item">
        <label for="kidneyFunction">肾功能</label>
        <select id="kidneyFunction" v-model="formData.kidneyFunction">
          <option value="正常">正常</option>
          <option value="异常">异常</option>
        </select>
      </div>

      <div class="form-item">
        <label for="pregnancyStatus">孕育情况</label>
        <select id="pregnancyStatus" v-model="formData.pregnancyStatus">
          <option value="无">无</option>
          <option value="怀孕中">怀孕中</option>
          <option value="哺乳中">哺乳中</option>
        </select>
      </div>

      <div class="form-item">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import {reactive} from 'vue';
import {useRoute} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "../router/index.js";
const route = useRoute();

// 创建一个响应式对象来存储表单数据
const formData = reactive({
  patientName: '',
  gender: '男',
  birthDate: null,
  weight: 50,
  allergyHistory: '无',
  pastMedicalHistory: '无',
  liverFunction: '正常',
  kidneyFunction: '正常',
  pregnancyStatus: '无',
  user_id: route.query.id
});

const handleSubmit = () => {
  console.log('表单提交:', {...formData});
  axios.post(`http://localhost:8000/app/create_patient/`, {datas: formData})
      .then(response => {
        console.log(response.data)
        ElMessage.success('提交成功')
        router.push({path: '/select-user-input', query: {data: JSON.stringify(formData)}})
      })
  // 处理表单提交逻辑
};
</script>

<style scoped>
.form-container {
  padding: 20px;
  max-width: 600px;
  margin: auto;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #333;
}

.form-item {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input, select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
